<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="我的拼卡" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '我的拼卡' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<view class="pic">
							<image :src="getImgUrl('cardCombination/pic5.png')" mode="widthFix"></image>
						</view>
						<view class="items">
							<view class="item">
								<view class="name">
									<text>名称</text>
								</view>
								<view class="value">
									<view class="info">
										<u-input inputAlign="right" v-model="form.shareName" color="#fff"
											placeholder="请输入拼卡名称" placeholder-style="color: #999999;"></u-input>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" color="#fff"></u-icon>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="name">
									<text>卡台号</text>
								</view>
								<view class="value">
									<view class="info">
										<text>{{currentTable.counterNo || '请选择卡台'}}</text>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" color="#fff"></u-icon>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="name">
									<text>男生门票价格</text>
								</view>
								<view class="value">
									<view class="info suc">
										<text>¥{{currentTable.boyTicketNum || 0}}</text>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" color="#fff"></u-icon>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="name">
									<text>女生门票价格</text>
								</view>
								<view class="value">
									<view class="info suc">
										<text>¥{{currentTable.girlTicketNum || 0}}</text>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" color="#fff"></u-icon>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="name">
									<text>最低售卖数量</text>
								</view>
								<view class="value">
									<view class="info">
										<text>{{currentTable.minNum || 0}}</text>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" color="#fff"></u-icon>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="name">
									<text>押金</text>
								</view>
								<view class="value">
									<view class="info suc">
										<text>¥{{currentTable.price || 0}}</text>
									</view>
									<view class="icon">
										<u-icon name="arrow-right" color="#fff"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="btns">
							<view class="btnOut btnOut2">
								<view class="btn" @click="initiateShare">
									<text>发起拼卡</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-picker :show="showPicker" :columns="columns" @cancel="showPicker = false"
					@confirm="confirmPicker"></u-picker>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight
	} from "@/utils";
	import {
		getDicts,
		getOrdershareCounter,
		initiateShare,
		initiateShareApi,
		payShareApi
	} from "@/api/api";

	export default {
		components: {
			VideoBox
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
			// this.getDictData()
			this.getDataList()
			if (e.id) {
				this.curTableId = e.id
			}
		},
		data() {
			return {
				menuHeight: 0,
				dataList: [],
				showPicker: false,
				columns: [],
				deposit: '', // 押金
				form: {
					"id": "",
					"detailId": "",
					"shareName": "",
				},
				currentTable: {},
				curTableId: null,
				// 发起拼卡加载状态
				initLoadding: false,

			};
		},
		methods: {
			getImgUrl,
			getImgUrlLocal,
			// 发起拼卡
			async initiateShare() {
				if (!this.form.shareName) {
					uni.$u.toast('请输入拼卡名称')
					return
				}
				if (!this.form.id) {
					uni.$u.toast('请选择卡台')
					return
				}
				
				if(this.form.shareName.length > 7){
					uni.$u.toast('拼卡名称不能大于7')
					return
				}

				if (this.initLoadding) return
				this.initLoadding = true

				const res = await initiateShareApi(this.form)
				if (res.code == 200) {
					const obj = {
						...res.data,
						package: res.data.packageVal
					}
					const _this = this
					wx.requestPayment({
						...obj,
						success(res) {
							if (res.errMsg == "requestPayment:ok") {
								uni.navigateTo({
									url: '/pages/mine/cardCombination/suc'
								})
							}
						},
						fail(err) {
							_this.initLoadding = false
						}
					})
					uni.$u.toast('发起拼卡成功')
				}

				// 5秒以后可以点击
				setTimeout(() => {
					this.initLoadding = false
				})
			},
			// 确认选择卡台
			confirmPicker() {
				// 回显数据
				this.currentTable = this.dataList.find(item => item.id == this.curTableId)
				this.showPicker = false
				this.form.id = this.currentTable.id
				this.form.detailId = this.currentTable.detailId
			},
			// 获取可选的卡台
			async getDataList() {
				const res = await getOrdershareCounter()
				if (res.code == 200) {
					this.dataList = res.rows
					this.confirmPicker()
					// this.columns.push(res.rows.map(item => item.counterNo))
				}
			},
			// 获取押金
			async getDictData() {
				const res = await getDicts("bidding_info_dict")
				if (res.code == 200) {
					this.deposit = (parseInt(res.data[0].dictValue) / 100) || 0
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 110rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #B3B4C3;
			}
		}

		.btnOut2 {
			box-shadow: inset 0rpx 12rpx 50rpx 0rpx #FFFFFF;
			.btn {
				background: linear-gradient( 291deg, #0FC6C2 0%, #BEFF02 100%), radial-gradient( 104% 104% at 94% 121%, #FFFFFF 0%, rgba(255,255,255,0) 100%), radial-gradient( 135% 135% at 5% 15%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 110rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.content {
		padding: 32rpx;

		.pic {
			position: relative;
			image {
				width: 114%;
				position: absolute;
				top: 0;
				left: -48rpx;
				z-index: -1;
			}
		}

		.items {
			// background: rgb(0, 0, 0);
			// border-radius: 60rpx;
			// border: 2rpx solid #647042;
			margin-top: 286rpx;
			.item {
				min-height: 140rpx;
				padding: 0 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.value {
					display: flex;
					align-items: center;

					.info {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							margin-right: 12rpx;
						}

						image {
							width: 32rpx;
							margin-right: 24rpx;
						}

						text {
							font-size: 28rpx;
							color: #FFFFFF;
						}
					}

					.suc {
						text {
							color: #0FC6C2;
						}
					}

					.err {
						text {
							color: #F5A4A5;
						}
					}

					.icon {
						margin-left: 26rpx;

						image {
							width: 45rpx;
						}
					}
				}

				.name {
					text {
						color: #B3B4C3;
						font-size: 28rpx;
					}
				}
			}

			.item1 {
				height: 200rpx;
			}
		}
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>